import * as React from 'react';
import { useNavigate } from 'react-router-dom';
import Box from '@/commonComponents/box/index';
import axios from 'axios';
import TravelItem from './components/travel/travelItem/index';
import Header from '@/commonComponents/header/Header';
import './index.module.scss';

const { memo, useState } = React;

function Information() {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState([]);
  React.useEffect(() => {
    setLoading(true);
    axios
      .get('/api/rest/travelList')
      // .then((res) => res.json())
      .then((res) => {
        setLoading(false);
        if (res.status === 200 && res.data.code === 0) {
          setData(res.data.data);
        } else {
          setData([]);
        }
      })
      .catch(() => {
        setLoading(false);
        setData([]);
      });
  }, []);

  // 回到上一页
  const navigate = useNavigate();
  const onBack = () => {
    navigate('/');
  };
  return (
    <div styleName="index-box">
      <div styleName="header-wrapper">
        <Header title="全部资讯" onBack={onBack} />
      </div>
      <Box data={data} isLoading={loading} styleName="info-box">
        {data.map((item, index) => {
          return <TravelItem data={item} key={index}></TravelItem>;
        })}
      </Box>
    </div>
  );
}

export default memo(Information);
